<template>
	<div>
		<div class="compare_window" style="margin-bottom: 5px;">
			<div class="old_version" style="text-align: center;">老版本</div>
			<div class="opr_window">操作</div>
			<div class="new_version" style="text-align: center;">新版本</div>
		</div>
		<div class="compare_contnt">
			<div class="compare_window" v-for="item in compareResult">
				<div class="old_version" v-html="item.old"></div>
				<div class="opr_window">
					<el-button type="text" v-if="item.opr == 'move'" @click="moveText(item)">=></el-button>
				</div>
				<div class="new_version" v-html="item.cur"></div>
			</div>
		</div>
		<div style="display: flex;flex-direction: row; justify-content: space-between;">
			<el-button @click="dealData(false)">取消</el-button>
			<el-button @click="dealData(true)">确认</el-button>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import eleData from './utils/RichElement.js'
	import eleOper from './utils/ElementOperator.js'
	import {ElButton} from 'element-plus'
	import 'element-plus/dist/index.css'
	export default {
		components: {
			ElButton
		},
		name: 'CompareVersion',
		title: 'compare-version',
		order: 3,
		props: {
			modelValue: {
				type: String,
				default: () => ''
			},
			oldVersion: {
				type: String,
				default: () => ''
			},
			hidenWindow: {
				type: Function,
				default: () => {return () => {}}
			}
		},
		emits: ['update:modelValue'],
		watch: {
			modelValue: {
				handler(newValue, oldValue) {
					if (newValue && this.currentVersion != newValue) {
						this.currentVersion = newValue;
						if (!this.currentVersion) {
							this.currentVersion = '';
						}
					}
				},
				immediate: true,
				deep: true
			},
			oldVersion: {
				handler(newValue, oldValue) {
					if (newValue && this.oldCompareVers != newValue) {
						this.oldCompareVers = newValue;
						if (!this.oldCompareVers) {
							this.oldCompareVers = '';
						}
					}
				},
				immediate: true,
				deep: true
			},
		},
		data() {
			return {
				currentVersion: '',
				oldCompareVers: '',
				compareResult: []
			}
		},
		mounted() {
			let curVer = $(this.currentVersion);
			let oldVer = $(this.oldCompareVers);
			this.compareData(curVer, oldVer);
		},
		methods: {
			moveText(item) {
				item.cur = item.old;
				item.opr =  '';
			},
			dealData(isSure) {
				if (isSure) {
					this.$emit('update:modelValue', this.currentVersion);
				}
				this.hidenWindow();
			},
			compareData(curVer, oldVer) {
				// debugger;
				let cur = 0;
				let old = 0;
				while(true) {
					if (old == oldVer.length || cur == curVer.length) break;
					let i = this.simplifyContext(curVer[cur], oldVer[old]);
					if (i == 0) {
						let item = {
							old: '',
							opr: '',
							cur: $(curVer[cur]).prop('outerHTML')
						}
						this.compareResult.push(item);
						// 表示旧的数据与新的数据没有相似之处
						cur ++;
						continue;
					} else if (i == 1) {
						// 表示有改动的内容，但没有相等
						let item = {
							old: $(oldVer[old]).prop('outerHTML'),
							opr: 'move',
							cur: $(curVer[cur]).prop('outerHTML')
						}
						this.compareResult.push(item);
						old ++;
						cur ++;
						continue;
					} else {
						// 表示内容是相等的
						let item = {
							old: $(oldVer[old]).prop('outerHTML'),
							opr: '',
							cur: $(curVer[cur]).prop('outerHTML')
						}
						this.compareResult.push(item);
						old ++;
						cur ++;
						continue;
					}
				}
				if (old == oldVer.length && cur < curVer.length) {
					for(let i = cur; i < curVer.length; i ++) {
						let item = {
							old: '',
							opr: '',
							cur: $(curVer[i]).prop('outerHTML')
						}
						this.compareResult.push(item);
					}
				}
				if (old < oldVer.length && cur == curVer.length) {
					for(let i = old; i < oldVer.length; i ++) {
						let item = {
							old: $(oldVer[i]).prop('outerHTML'),
							opr: 'move',
							cur: ''
						}
						this.compareResult.push(item);
					}
				}
			},
			simplifyContext(curCon, oldCon) {
				let cur = $(curCon).prop('outerHTML');
				let old = $(oldCon).prop('outerHTML');
				let curId = $(curCon).attr("dataId");
				let oldId = $(oldCon).attr("dataId");
				if (curId == oldId && cur == old) return 2;
				if (curId == oldId && cur != old) return 1;
				return 0;
			},
			imgListCode(tag) {
				return tag == eleData.image.id || tag == eleData.listOrder.id || tag == eleData.code.id
			}
		},
	}
</script>

<style scoped>
	.compare_window {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
	}
	.opr_window {
		width: 100px;
		text-align: center;
	}
	.new_version, .old_version {
		width: calc(50% - 50px);
		text-align: left;
	}
	.window_border {
		border: 1px solid rgba(0, 0, 0, 0.5)
	}
	.compare_contnt {
		height: 400px;
		overflow-y: auto;
	}
	.compare_window:nth-child(odd) {
		background-color: rgba(250, 240, 230, 0.5);
	}
	.compare_window:nth-child(even) {
		background-color: rgba(250, 240, 250, 0.5);
	}
</style>